<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>丑团外卖</title>
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/container.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/add-to-car.css" />
	<script src="../vue@3.2.23.js"></script>
	<script src="./js/data.js"></script>
	
  </head>
  <body>
	  <!-- http://192.168.0.14:8848/vue-edu/teacher/003-%E7%9F%A5%E8%AF%86%E5%9B%9E%E9%A1%BE-%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C/index.html -->
    <div id="app">
		<div class="container">
		  <div class="menu">
		    <div class="menu-item active"><span>推荐</span></div>
		    <div class="menu-item"><span>热销</span></div>
		    <div class="menu-item"><span>折扣</span></div>
		    <div class="menu-item"><span>夏日冰咖必喝榜</span></div>
		    <div class="menu-item"><span>进店必喝</span></div>
		    <div class="menu-item"><span>只喝美式</span></div>
		    <div class="menu-item"><span>酷爽特调水果冰萃</span></div>
		    <div class="menu-item"><span>经典奶咖</span></div>
		    <div class="menu-item"><span>创意奶咖</span></div>
		    <div class="menu-item"><span>瑞纳冰季</span></div>
		    <div class="menu-item"><span>不喝咖啡</span></div>
		    <div class="menu-item"><span>轻食甜品</span></div>
		    <div class="menu-item"><span>热卖套餐</span></div>
		  </div>
		  <div class="goods-list">
		    <div class="goods-item" :class="{active:val.chooseNum > 0}"  v-for="(val,index) in goods" :key="index">
		      <img :src="val.pic" alt="" class="goods-pic" />
		      <div class="goods-info">
		        <h2 class="goods-title">{{val.title}}</h2>
		        <p class="goods-desc">{{val.desc}}</p>
		        <p class="goods-sell">
		          <span>月售 {{val.sellNumber}}</span>
		          <span>好评率{{val.favorRate}}%</span>
		        </p>
		        <div class="goods-confirm">
		          <p class="goods-price">
		            <span class="goods-price-unit">￥</span>
		            <span>{{val.price}}</span>
		          </p>
		          <div class="goods-btns">
		            <i class="iconfont i-jianhao" @click="decrese(val)"></i>
		            <span>{{val.chooseNum}}</span>
		            <i class="iconfont i-jiajianzujianjiahao" @click="increse(val)"></i>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>
		<div class="footer">
		  <div class="footer-car-container">
		    <div class="footer-car" :class="{active:payInfo.goodsNum>0}">
		      <i class="iconfont i-gouwuchefill"></i>
		      <span class="footer-car-badge">{{payInfo.goodsNum}}</span>
		    </div>
		    <div class="footer-car-price">
		      <span class="footer-car-unit">￥</span>
		      <span class="footer-car-total">{{payInfo.payPrice.toFixed(2)}}</span>
		    </div>
		    <div class="footer-car-tip">配送费￥{{delevaryPrice}}</div>
		  </div>
		  <div class="footer-pay" :class="{active:payInfo.thresholdPrice<=0}">
		    <a href="">去结算</a>
		    <span>还差￥{{payInfo.thresholdPrice.toFixed(0)}}元起送</span>
		  </div>
		</div>
		
		<div class="add-to-car">
		  <i class="iconfont i-jiajianzujianjiahao"></i>
		</div>
	</div>
	
  </body>
</html>
<script>
	const {createApp} = Vue;
	const app = createApp({
		data() {
			return{
				goods,
				// 配送费
				delevaryPrice:5,
				// 起送门槛
				deliveryThreshold:30,
			}
		},
		methods:{
			increse(val){
				val.chooseNum++;
				val.allPrice = val.chooseNum * val.price
			},
			decrese(val){
				if(val.chooseNum <= 0){
					return
				}
				val.chooseNum--;
				val.allPrice = val.chooseNum * val.price
			}
		},
		mounted(){
			this.goods = this.goods.map(val => {
				return {
					...val,
					chooseNum:0,
					allPrice:0
				}
			})
		},
		computed:{
			payInfo(){
				let sumPrice = 0;
				let goodsNum = 0;
				this.goods.forEach(val => {
					sumPrice += val.allPrice;
					goodsNum += val.chooseNum;
				})
				return {
					payPrice:sumPrice,
					goodsNum,
					thresholdPrice:this.deliveryThreshold - sumPrice
				};
			}
		}
	})
	const vm = app.mount('#app')
	
</script>



